<template>
    <div class="houseList-v3">

        <section class="card">
            <img :src="HouseData?.image?.url" alt="">
            <div class="top">
                <!-- <p>优选PRO</p> -->
                <img src="@/assets/img/home-love.png" alt="">
            </div>


        </section>
        <div class="card-bottom">
            <div class="location">
                <img src="@/assets/img/location2.png" alt="">
                <span class="cityName">{{HouseData?.location}}</span>
            </div>
            <div class="houseName">
                <p>{{HouseData?.houseName}}</p>
            </div>
            <div class="summaryText">
                <p> {{HouseData?.summaryText}}</p>
            </div>

            <div class="housePrice">
                <!-- <van-rate size="12" v-model="value" readonly allow-half /> -->
                <span class="finalPrice">{{HouseData?.finalPrice}}</span>
                <span class="productPrice">¥{{HouseData?.productPrice}}</span>
                <span class="priceTipBadge">{{HouseData?.priceTipBadge?.text}}</span>
            </div>
        </div>


    </div>
</template>

<script setup>

defineProps({
    HouseData: {
        type: Object,
        default: () => ({})
    }
});

/* const HomeStore = useHomeStore()
HomeStore.getHouseListData()
const { HouseList } = storeToRefs(HomeStore); */

</script>

<style lang="less" scoped>
.houseList-v3 {
    display: flex;
    flex-direction: column;
    width: 50%;
    background-color: rgba(255, 255, 255, 0.535);
    border-radius: 12px;
    margin: 5px 0px;
    padding: 0px 1px;
    border: rgb(237, 236, 236) 1px solid;
    box-sizing: border-box;

    .card {

        position: relative;






        img {
            width: 100%;
            height: 100%;

            border-radius: 8px 8px 0 0;

        }

        .top {
            font-size: 14px;
            color: #fff;

            p {
                position: absolute;
                top: 10px;
                left: 5px;
            }

            img {
                position: absolute;
                width: 30px;
                height: 30px;
                top: 5px;
                right: 5px;

            }

        }




    }

    .card-bottom {

        padding: 5px 10px;
        color: #666;

        .location {
            margin: 4px 0 8px;
            line-height: 12px;

            img {
                width: 12px;
                height: 12px;
            }

            span {
                font-size: 12px;
                color: #666;
                margin-left: 3px;
            }
        }

        .houseName {
            p {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 14px;
                color: #666;
            }

        }

        .summaryText {

            font-size: 12px;
            padding: 6px 0 6px;
            color: #666;
        }

        .housePrice {
            display: flex;
            align-items: center;

            .finalPrice {
                font-size: 14px;
                color: #ff9645;
            }

            .productPrice {
                font-size: 12px;
                color: #999;
                text-decoration: line-through;
                margin-left: 3px;
            }

            .priceTipBadge {

                font-size: 14px;
                color: #fff;
                padding: 0 10px;
                margin-left: 5px;
                border-radius: 8px;
                background-image: linear-gradient(270deg, #f66, #ff9f9f);
            }
        }


    }




}
</style>